
<template>
<block v-if="isShow">
<!-- 背景遮罩图 -->
    <view class="auth-bg">
        <!-- 450*450    288-->
    </view>

    <!-- 居中内容 -->
    <view class="auth-main">
        <!-- 提示信息-->
        <view class="auth-info">
            {{authInfo}}
        </view>

        <!-- 打开授权设置按钮 -->
        <button open-type="openSetting" class="auth-btn-set">
            <image src="http://beta.gtimg.com/GodIdent/huiyan/img/icon42_appwx_logo.png" />
            打开授权设置
        </button>
    </view>
</block>
</template>

<script>
export default {
  props: {
    // 必要的初始化参数
    isShow: {
      type: Boolean,
      default: false
    },
    authInfo: {
      type: String,
      default: null
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
.auth-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  background: rgba(0, 0, 0, 0.37);
}

.auth-main {
  position: absolute;
  top: 250rpx;
  left: 50%;
  z-index: 1002;
  width: 250px;
  margin-left: -140px;
  padding: 15px;
  text-align: center;
  background: #fff;
}

.auth-info {
  padding: 10px 0;
  font-size: 13px;
  animation: upAndDown 1s linear infinite alternate;
  color: green;
}

.auth-btn-set {
  display: flex;
  align-items: center;
  width: 178px;
  height: 45px;
  padding: 0;
  margin: 15px auto;
  font-size: 15px;
  color: #fff;
  background-color: rgb(0, 190, 42);
}

.auth-btn-set image {
  width: 28px;
  height: 28px;
  margin: 0 6px 0 14px;
}

.auth-btn-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 178px;
  height: 45px;
  padding: 0;
  margin: 10px auto;
  font-size: 15px;
  color: #000;
  background-color: #ddd;
}
</style>

